import { ref } from 'vue'
import { defineStore } from 'pinia'
import { convertRouter } from '@/utils/routes'
import { constantRoutes } from '@/router'

export const useMenuStore = defineStore(
  'menuStore',
  () => {
    const asideFlag = ref(false) // 是否有侧边栏
    const menuActive = ref('/') // 当前激活的菜单
    const isCollapse = ref(false) // 侧边栏是否折叠

    // 异步路由
    const asyncRoutes = [
      {
        name: '_book',
        path: '/',
        component: 'Layout',
        meta: {
          title: '书籍',
          icon: 'book',
        },
        children: [
          {
            name: 'book',
            path: '/book',
            component: '/book/Index.vue',
            meta: {
              hasAside: true,
              title: '书架',
              icon: 'book',
            },
            showMenu: true, // 显示在菜单中
          },
        ],
        showMenu: true, // 显示在菜单中
      },
      {
        name: '_bookMgr',
        path: '/',
        component: 'Layout',
        meta: {
          title: '书籍管理',
          icon: 'bookMgr',
        },
        children: [
          {
            name: 'bookMgr_book',
            path: '/bookMgr/book',
            component: '/bookMgr/book/Index.vue',
            meta: {
              hasAside: false,
              title: '书本管理',
              icon: 'bookSetting',
            },
            showMenu: true, // 显示在菜单中
          },
          {
            name: 'bookMgr_chapter',
            path: '/bookMgr/chapter',
            component: '/bookMgr/chapter/Index.vue',
            meta: {
              hasAside: false,
              title: '章节管理',
              icon: 'chapter',
            },
            showMenu: true, // 显示在菜单中
          },
          {
            name: 'bookMgr_bookSourceSetting',
            path: '/bookMgr/bookSourceSetting',
            component: '/bookMgr/bookSourceSetting/Index.vue',
            meta: {
              hasAside: false,
              title: '书源管理',
              icon: 'bookSourceSetting',
            },
            showMenu: true, // 显示在菜单中
          },
        ],
        showMenu: true, // 显示在菜单中
      },
      {
        name: '_sysMgr',
        path: '/',
        component: 'Layout',
        meta: {
          title: '系统设置',
          icon: 'sysMgr',
        },
        children: [
          {
            name: 'taskSetting',
            path: '/taskCenter/taskSetting',
            component: '/taskCenter/taskSetting/Index.vue',
            meta: {
              hasAside: false,
              title: '任务配置',
              icon: 'taskSetting',
            },
            showMenu: true, // 显示在菜单中
          },
          {
            name: 'taskRecord',
            path: '/taskCenter/taskRecord',
            component: '/taskCenter/taskRecord/Index.vue',
            meta: {
              hasAside: false,
              title: '任务记录',
              icon: 'taskRecord',
            },
            showMenu: true, // 显示在菜单中
          },
        ],
        showMenu: true, // 显示在菜单中
      },
      {
        name: '_content',
        path: '/content/:bookId/:chapterId',
        component: '/bookContent/Index.vue',
        props: true,
        meta: {
          title: '书籍内容',
          icon: 'book',
        },
        showMenu: false, // 不显示在菜单中
      },
    ]
    const routes = ref([]) // 路由列表

    /**
     * 侧边栏的状态
     * @param {*} value
     */
    const setAside = (value) => {
      asideFlag.value = value
    }

    /**
     * 设置当前激活的菜单
     * @param {*} value
     */
    const setMenuActive = (value) => {
      menuActive.value = value
    }

    /**
     * 设置侧边栏折叠状态
     * @param {boolean} value - 折叠状态
     */
    const setCollapse = (value) => {
      isCollapse.value = value
    }

    /**
     * 设置路由
     * @returns
     */
    const setRoutes = () => {
      return new Promise((resolve) => {
        const convertRouters = convertRouter(asyncRoutes)
        const allRoutes = [...constantRoutes, ...convertRouters]
        routes.value = allRoutes
        resolve(allRoutes)
      })
    }

    return { asideFlag, menuActive, routes, isCollapse, setAside, setMenuActive, setRoutes, setCollapse }
  },
  {
    // 配置持久化
    persist: {
      enabled: true,
      serializer: {
        serialize: (state) => {
          console.log('[Persist] Serializing state:', state)
          return JSON.stringify({ isCollapse: state.isCollapse })
        },
        deserialize: (value) => {
          console.log('[Persist] Deserializing value:', value)
          return JSON.parse(value)
        },
      },
    },
  },
)
